<template>
  <div class="record-page">
    <div class="nodata" v-if="recordsList.length === 0">暂时没有通话记录</div>
    <mu-list :dense="true" textline="two-line">
      <!-- <mu-sub-header class="sub-title">王五&nbsp;&nbsp;4645645&nbsp;&nbsp;40美元</mu-sub-header> -->
      <div class="list" v-for="(item,key) in recordsList" :key="key">
        <mu-list-item avatar button @click="toCall(item)">
          <mu-list-item-action>
            <mu-avatar :color="item.callType === 'outbound' || item.callType === 'inbound' || item.callType === 'callforwarding' ? 'success': 'error'">
              <mu-icon :value="':iconfont '+(item.callType === 'outbound' ? 'icon-huchudianhua': item.callType === 'inbound' ? 'icon-huru': item.callType === 'callforwarding' ? 'icon-iconfontdianhua2' : 'icon-iconfontdianhua1')"></mu-icon>
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-content>
            <mu-list-item-title>{{item.userName}}{{item.to}}</mu-list-item-title>
            <mu-list-item-sub-title>{{item.countryName}}</mu-list-item-sub-title>
          </mu-list-item-content>
          <mu-list-item-action>
            {{item.createdAt | formatDate}}
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider></mu-divider>
      </div>
    </mu-list>
    <mu-button color="success" fab small class="keyboard-btn" v-if="!keyboardVisible" @click="keyboardVisible = true">
      <mu-icon value=":iconfont icon-dianhuajianpantianchong" size="25"></mu-icon>
    </mu-button>
    <div class="number-box-bg"  @click="hideKeyboard" v-if="keyboardVisible"></div>
    <mu-flex fill wrap="wrap" class="number-box" v-if="keyboardVisible">
      <mu-container style="position: relative;">
          <mu-select filterable v-model="dialingPrefix" full-width style="padding-bottom:0;margin-bottom:0;min-height:auto;">
            <mu-option v-for="(item,index) in citys" :key="index" :label="item.countryName + '('+item.dialingPrefix+')'" :value="item.dialingPrefix+'-'+item.countryName">{{item.countryName +' ('+item.dialingPrefix+')'}}</mu-option>
          </mu-select>
          <mu-text-field disabled v-model="telephone" solo class="phone-input" ></mu-text-field>
          <mu-button large @click="removeNumber" class="close" style="position: absolute;bottom:0px;right: 0px;">
            <mu-icon value=":iconfont icon-guifandaohanglancha"></mu-icon>
          </mu-button>
      </mu-container>
      <div class="number-item" v-for="(item, index) in numbers" :key="index">
        <mu-button large @click="addNumber(item)">
          {{item}}
        </mu-button>
      </div>
      <div class="number-item">
        <mu-button large @click="hideKeyboard">
          <mu-icon value=":iconfont icon-iconset0282"></mu-icon>
        </mu-button>
        <button class="phoneButton" :class="{disabled: !telephone.length}" @click="callPhone" :disabled="!telephone.length">
          <mu-icon value=":iconfont icon-phone-channel"></mu-icon>
        </button>
        <mu-button large @click="removeAllNumber" class="close" style="font-size:14px">清空</mu-button>
      </div>
    </mu-flex>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data () {
    return {
      keyboardVisible: false,
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'],
      telephone: '',
      dialingPrefix: '86-China',
      citys: []
    };
  },
  computed: {
    ...mapGetters([
      'recordsList'
    ])
  },
  created() {
    var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    this.$store.dispatch('getRecordsList', this.$route.query.msisdn || userInfo.msisdn);
    this.$api.app.getCountry().then((res) => {
      this.citys = res;
    });
  },
  methods: {
    toCall (item) {
      this.$getClient((res) => {
        if (res.nextBillingDay === 'downtime') {
          this.$toast.center('当前号码已停机');
        } else {
          if (res.remainingMoney > 0) {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            this.keyboardVisible = false;
            this.$store.dispatch('setTelephone', item.to);
            this.$store.dispatch('setCountryName', item.countryName);
            this.$store.dispatch('toggleCallTrue');
            this.$store.dispatch('setDialStatus', 'dial');
            this.$nexmoApplication.callPhone(item.dialingPrefix + '-' + item.to + '-' + (this.$route.query.msisdn || userInfo.msisdn) + '-' + (this.$route.query.countryCode || userInfo.countryCode));
          } else {
            this.$toast.center('余额不足请及时充值');
          }
        }
      });
    },
    hideKeyboard () {
      this.keyboardVisible = false;
    },
    addNumber (val) {
      this.telephone = `${this.telephone}${val}`;
    },
    callPhone() {
      this.$getClient((res) => {
        if (res.nextBillingDay === 'downtime') {
          this.$toast.center('当前号码已停机');
        } else {
          if (res.remainingMoney > 0) {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            this.$store.dispatch('setTelephone', this.telephone);
            this.$store.dispatch('setCountryName', this.dialingPrefix.split('-')[1]);
            this.$store.dispatch('toggleCallTrue');
            this.$store.dispatch('setDialStatus', 'dial');
            this.$nexmoApplication.callPhone(this.dialingPrefix.split('-')[0] + '-' + this.telephone + '-' + (this.$route.query.msisdn || userInfo.msisdn) + '-' + (this.$route.query.countryCode || userInfo.countryCode));
            this.hideKeyboard();
          } else {
            this.$toast.center('余额不足请及时充值');
          }
        }
      });
    },
    removeAllNumber() {
      this.telephone = '';
    },
    removeNumber () {
      this.telephone = this.telephone.substring(0, this.telephone.length - 1);
    }
  }
};
</script>
<style lang="less" scoped>
.close.mu-raised-button.mu-button-large .mu-icon {
    font-size: 18px;
}
.close.mu-raised-button.mu-button-large{
  margin-right: -1px;
}
.phoneButton{
  min-width: 88px;
  flex: 1 1 100%;
  font-size: 24px;
  padding:0;
  border:0;
  border-radius: 0;
  box-shadow: none;
  background-color: #4caf50;
  z-index: 999;
  position: relative;
  margin:0 -1px;
  .mu-icon{
    color:#fff;
    font-size: 24px;
  }
}
.mu-raised-button{
  box-shadow: none;
}
.phoneButton.disabled{
  background-color: #cacaca;
  // border-left:1px solid #333;
  // border-right:1px solid #333;
  .mu-icon{
    color:#333;
  }
}
.nodata{
  text-align: center;
  color:#666;
  line-height: 80px;
}
  .record-page{
    .sub-title{
      line-height: 2;
      text-align: right;
      background: var(--track-chip);
      padding: 0 10px;
    }
    .keyboard-btn{
      position: fixed;
      right: 15px;
      bottom: 70px;
    }
    .number-box-bg{
      position: fixed;
      top:0;
      left:0;
      right: 0;
      bottom:0;
      background-color: rgba(0, 0, 0, 0.5)
    }
    .number-box{
      text-align: center;
      background: #fff;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 57px;
      .phone-input{
        font-size: 24px;
        width: 100%;
      }
      .number-item{
        flex: 1 1 33.33%;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: stretch;
        &:nth-child(3n + 2) {
          border-right: 1px solid #eee;
        }
        &:nth-child(3n + 3) {
          border-right: 1px solid #eee;
        }
      }
    }
  }
</style>
<style lang="less">
.displayFlx{
  display: flex;
  .cols{
    flex:1;
  }
}
  .record-page{
    .number-item{
      .mu-button{
        flex: 1 1 100%;
        font-size: 24px;
      }
    }
  }
</style>
